<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://www.gzsxt.cn/fucntions"  prefix="myFn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<base href="<%=basePath%>">
<title>SongPage</title>

<!--主题样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/demo/demo.css">

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript"src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript"src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

	$(function(){
		$("#myDataGrid").datagrid({
			fit:true,
			title:'歌曲列表',
			fitColumns:true,
			url:'song/songList.do',
			method:'post',
			pagination:true,
			toolbar:"#toolbar",
		});
		
		$("#myDialog").dialog({
			width:610,
			height:610,
			buttons:"#dialogButtons",
			closed:true,
		});
		
		/*
		$('input[haha="tag"]').tagbox({
			url:"lable/getLables.do",
			valueField:'label_id',
		    textField:'label_name'
		});
		*/

		$("#song_label_combo").combobox({
			  url:"lable/getLables.do",
			  valueField:'label_id',
		    textField:'label_name',
		    editable:true,
		    multiple:true,
		    mode:'remote',
		    showItemIcon:true,
		    panelHeight:'auto',
		}); 
		
		$("#song_lang_combo").combobox({
			  url:"lang/getLangs.do",
			  valueField:'lang_id',
		    textField:'lang_name',
		    panelHeight:'auto'
		});
		
		//filebox
		$("#songFile").hide();
		$("#lyricsFile").hide(); 
		$('input[haha="songfile"]').filebox({
			buttonText: '选择文件',
			accept: 'audio/*',
			onChange: function(){
				song_url = $("input[name=song_url]").val();
				song_url = song_url.replace('C:\\fakepath\\', "");
				$('input[haha="songfile"]').filebox('setValue', song_url);
				$("#songFile").show(); 
			}
		});
		
		$('input[haha="lyricsfile"]').filebox({
			buttonText: '选择文件',
			onChange: function(){
				$("#lyricsFile").show(); 
			}
		});
		
		$("#myDataGrid").datagrid('fixRowHeight');
		
	});

	var file = {
		upload:function(fileId){
			
			console.log(fileId);
			var theOne = "input[name="+fileId+"]";
			console.log($(theOne).val());
			if ($(theOne).val()){
				$.ajax({
				    type:'POST',
				    url : 'song/upload.do',
				    data:  $("#songUpload")[0].files[0],
			        processData: false,  // 告诉jQuery不要去处理发送的数据
			        contentType: false,
			        dataType : 'json',
				    success : function(data) { 
				    	if(data.code == 1){
				    		$.messager.alert("温馨提示","上传成功",'info');
				    		$("input[name="+fileId+"]").val(data.msg);
				    	}else{
				    		$.messager.alert("温馨提示",data.msg,'error'); 
				    	}
				    },
				    error : function(data) {
				        $.messager.alert("提示","异常，请稍后再试！");
				    }
				})
			}
		},
		cancel:function(fileId){
			
		}
	}

	//Formatters
	function formatterFire(value,row,index){
		var htmlstr = "";
		if (row.song_hit>80 || row.song_like>5000 || row.song_download>4000 || row.song_play>4000) {
			htmlstr = '<a><img src="resources/images/fire.gif" height="18" width="18" alt="热门歌曲" /> </a>';
		}
		return htmlstr;
	}

	function formatterPublishDate(value,row,index){
		var date = new Date(value);
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		var d = date.getDate();
		return y + '-' + m + '-' + d;
	}	
	
	function progressFormatter(value,row,index){
		var v = value/10;
		if (v>100){
			v = 100;
		} else {
			v = Math.round(v);
		}
		var htmlstr='<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
				         +'<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px;"> '
				         +'</div>'
		     		 +'</div>';
	    return htmlstr; 
	} 
	
	var cmdObj = {
		openDialog : function() {
			$("#myDialog").dialog("open");
			$("#myDialog").dialog("hcenter");
			$("#myDialog").dialog("setTitle","新增歌曲信息");
			$("#myPower").datagrid("loadData",{rows:[]});
		},
		saveOrUpdate : function() {
			var song_id = $("#song_id").val();
			var url = "";
			if(song_id != ""){
				url = "song/updateSong.do"
			}else{
				url = "song/addSong.do";
			}
			$('#songForm').form('submit', {   
			    url:url,    
			    success:function(data){    
			        data = eval("("+data+")");
			    	if(data.code == 1){
			    		$.messager.alert("温馨提示",data.msg,'info');  
			    		$("#myDialog").dialog("close");
			    		$("#myDataGrid").datagrid("reload");
			    	}else{
			    		$.messager.alert("温馨提示",data.msg,'error'); 
			    	}
			    	
			    }    
			}); 
		},
		del:function(){
			var rowData = $("#myDataGrid").datagrid("getSelections");
			console.log(rowData);
			if(rowData == null){
				$.messager.alert("温馨提示","请选择需要删除的行",'warning'); 
				return;
			}
			$.messager.confirm('确认','您确认想要删除这些歌曲吗？',function(r){    
			    if (r){    
					var song_id = new Array(rowData.length);
					for (var i=0;i<rowData.length;i++){
						song_id[i] = rowData[i].song_id;
					}
					console.log(song_id);
					$.get("song/deleteSong.do",{"song_ids":song_id.join(",")},function(data){
						if(data.code == 1){
				    		$.messager.alert("温馨提示",data.msg,'info');  
				    		$("#myDataGrid").datagrid("reload");
				    	}else{
				    		$.messager.alert("温馨提示",data.msg,'error'); 
				    	}
					});
			    }    
			});  
		},
		edit:function(){
			var rowDatas = $("#myDataGrid").datagrid("getSelections");
			if(rowDatas == null){
				$.messager.alert("温馨提示","请选择需要修改的行",'warning'); 
				return;
			} else if (rowDatas.length>1){
				$.messager.alert("温馨提示","只能选择单行进行修改",'warning'); 
				return;
			}
			var rowData = rowDatas[0];
			$("#songForm").form("load",rowData);
			console.log(rowData);
			$("#myDialog").dialog("open");	
			$("#myDialog").dialog("setTitle","编辑歌曲信息");
		},
		multiedit:function(){
			 
		},
		reload:function(){
			$("#myDataGrid").datagrid("load",{
				url:'song/songList.do',
			});
		},
		closeDialog:function(){
			$("#songFile").hide(); 
			$("#lyricsFile").hide(); 
			$("#myDialog").dialog("close");
		},
		doSearch:function(){
			console.log($('#song_lang_combo').combobox('getValue'));
			if ($('#publish_end').val() != "" && $('#publish_begin').val() > $('#publish_end').val()) {
				$.messager.alert("温馨提示","起始日期不能大于结束日期",'error'); 
				return;
			}
			$('#myDataGrid').datagrid('load',{
				song_name_key: $('#song_name').val(),
				singer_name_key: $('#singer_name').val(),
				cd_name_key: $('#cd_name').val(),
				lang_id_key: $('#song_lang_combo').combobox('getValue'),
				publish_begin_key: $('#publish_begin').val(),
				publish_end_key: $('#publish_end').val(),
			});
		},
		search:function(){
			if ($('#MultiSearch').css('display') == 'block') {
				 $('#MultiSearch').attr("style","display:none;");//隐藏div
		    }else {
		    	 $('#MultiSearch').attr("style","display:block;");//显示div
		    }		      
		}
	}
	
</script>

<!-- 添加角色对话框 -->
<div id="myDialog" class="easyui-dialog" align="center">
	<form id="songForm" action="" method="post">
		<table style="margin-top: 10;width: 550px;height:600px" align="center">
			<tr>
				<td><input type="hidden" id="song_id" name="song_id"></td>
			</tr>
			<tr>
				<td style="text-align: right;">歌曲名称（必填）:<td>
				<td><input name="song_name" class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">歌手编号（必填）:<td>
				<td><input name="singer_id" class="easyui-validatebox" data-options="{required:true,prompt:'请输入歌手编号,如 23'}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">专辑编号（必填）:<td>
				<td><input name="cd_id" class="easyui-validatebox" data-options="{required:true,prompt:'请输入专辑编号,如 55'}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">播放次数:<td>
				<td><input name="song_play" class="easyui-textbox" data-options="{prompt:'请输入播放次数,如 5000'}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">下载次数:<td>
				<td><input name="song_download" class="easyui-textbox" data-options="{prompt:'请输入下载次数,如 5000'}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">收藏次数:<td>
				<td><input name="song_like" class="easyui-textbox" data-options="{prompt:'请输入收藏次数,如 5000'}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">发行时间（必填）:<td>
				<td><input name="song_publish" class="easyui-datebox" data-options="{required:true,prompt:'yyyy-MM-dd'}" ></td>
			</tr>
			<tr>
				<td style="text-align: right;">歌曲时长:<td>
				<td><input name="song_time" class="easyui-textbox" data-options="{prompt:'请歌曲时长,如 05:30'}" ></td>
			</tr>
			<tr>
				<td style="text-align: right;">歌曲类型:<td>
				<td><input id="song_label_combo" class="easyui-combobox" name="song_label" haha="tag"></td>
			</tr>
			<tr>
				<td style="text-align: right;">歌曲状态:<td>
				<td><input name="song_status" class="easyui-textbox" data-options="{}" ></td>
			</tr>
			<tr>
				<td style="text-align: right;">上传歌曲:<td>
				<td><input id="songUpload" name="song_url" haha="songfile" class="easyui-filebox" data-options="{prompt:'请选择歌曲文件...'}" enctype="multipart/form-data"></td>
			</tr>
			<tr>
				<td style="text-align: right;"><td>
				<td id="songFile">
					<a type="hidden" onclick="file.upload('song_url');" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">上传</a>
					<a type="hidden" onclick="file.cancel('song_url');" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
				</td>
			</tr>
			<tr>
				<td style="text-align: right;">上传歌词:<td>
				<td><input name="song_lyrics" haha="lyricsfile" class="easyui-filebox" data-options="{prompt:'请选择歌词文件...'}" enctype="multipart/form-data"></td>
			</tr>
			<tr>
				<td style="text-align: right;"><td>
				<td id="lyricsFile">
					<a type="hidden" onclick="file.upload('song_lyrics');" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">上传</a>
					<a type="hidden" onclick="file.cancel('song_lyrics');" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
				</td>
			</tr>
		</table>
	</form>
</div>

<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="cmdObj.saveOrUpdate();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="cmdObj.closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<div id="toolbar">
	<div style="display:table-cell;vertical-align:middle">
		<div>
			<c:if test="${myFn:checkPermission('song/addSong.do')}">
				<a onclick="cmdObj.openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}">新增</a> 
			</c:if>
			<c:if test="${myFn:checkPermission('song/deleteSong.do')}">
				<a onclick="cmdObj.del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}">删除</a>
			</c:if>
			<c:if test="${myFn:checkPermission('song/updateSong.do')}">
				<a onclick="cmdObj.edit();" class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}">修改</a> 
				<a onclick="cmdObj.multiedit();" class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}">批量修改</a> 
			</c:if>
			<a onclick="cmdObj.search();"class="easyui-linkbutton" data-options="{iconCls:'icon-search',plain:true}">搜索</a>
			<a onclick="cmdObj.reload();"class="easyui-linkbutton" data-options="{iconCls:'icon-reload',plain:true}">刷新</a>
		</div>	
			<div style="margin:10px 0;">
				<span>Selection Mode: </span>
				<select onchange="$('#myDataGrid').datagrid({singleSelect:(this.value==0)})">
					<option value="1">Multiple Rows</option>
					<option value="0">Single Row</option>
				</select>
			</div>
			
		<div id="MultiSearch" style="padding:3px;display:none">
			<span>  </span>
			<span>歌曲名称:</span>
			<input id="song_name" style="line-height:26px;border:1px solid #ccc">
			<span>歌手名称:</span>
			<input id="singer_name" style="line-height:26px;border:1px solid #ccc">
			<span>专辑名称:</span>
			<input id="cd_name" style="line-height:26px;border:1px solid #ccc">
			发行日期: <input id="publish_begin" class="easyui-datebox" style="width:150px">
			至: <input id="publish_end" class="easyui-datebox" style="width:150px">
			语种:<select id="song_lang_combo" class="easyui-combobox" panelHeight="auto" style="width:120px"></select>
			<a class="easyui-linkbutton" data-options="{iconCls:'icon-search'}" onclick="cmdObj.doSearch();">Search</a>
		</div>
		
		<!--  
		<input id="search" class="easyui-searchbox" style="width:300px" data-options="searcher:keywords,prompt:'输入关键字', menu:'#searchMenu'"></input>
		<div id="searchMenu" style="width:120px">
		    <div data-options="name:'all'">所有</div>
		    <div data-options="name:'song_name_key'">歌曲名称</div>
		    <div data-options="name:'singer_name_key'">歌手名称</div>
		    <div data-options="name:'cd_name_key'">专辑名称</div>
		</div>
		 -->

	</div>	
</div>

<!-- datagrid 组件 -->
<table id="myDataGrid" class="easyui-datagrid" >
	<thead>
		<tr>
			<th field='ck' data-options="width:1,checkbox:true"></th>
			<th field='song_id' data-options="width:0.5">歌曲编号</th>
			<th field='fire' data-options="width:0.5,formatter:formatterFire"></th>
			<th field='song_name' data-options="width:1">歌曲名称</th>
			<th field='singer_name' data-options="width:1">歌手名称</th>
			<th field='cd_name' data-options="width:1">专辑名称</th>
			<th field='lang_name' data-options="width:1">语种</th>
			<th field='song_play' data-options="width:1">播放次数</th>
			<th field='song_download' data-options="width:1">下载次数</th>
			<th field='song_like' data-options="width:1">收藏次数</th>
			<th field='song_publish' data-options="width:1,formatter:formatterPublishDate">发行时间</th>
			<th field='song_label' data-options="width:1">歌曲类型</th>
			<th field='song_hit' data-options="width:2,formatter:progressFormatter">歌曲热度</th>
		</tr>
	</thead>
</table >